@import "public";
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #000;
}
ul{
    list-style-type: none;
}
div{
    // border: solid 1px;
}
html{
    scroll-behavior: smooth;
}

// 固定定位
.jd-tool{
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 150px;
    right: 0;
    width: 35px;
    height: 344px;
    z-index: 9;
    >ul{
        >li{
            margin-bottom: 1px;
            width: 35px;
            height: 35px;
            background-color: #7a6e6e;
            position: relative;
            &:hover{
                cursor: pointer;
                background-color: #c81623;
                p{
                    left: -62px;
                    transition: all .2s linear;
                }
            }
            p{
                // animation: move 3s linear;
                font-size: 12px;
                color: #fff;
                position: absolute;
                left: 100%;
                width: 62px;
                line-height: 32px;
                height: 35px;
                padding: 0 10px;
                background-color: #c81623;
                z-index: -1;
            }
        }
        .link{
            background-image: url(../details-img/固定-link.png);
            background-repeat: no-repeat;
            background-position: center;
            &:hover{
                cursor: pointer;
                background-color: #c81623;
                p{
                    left: -62px;
                    transition: all .2s linear;
                }
            }
            p{
                // animation: move 3s linear;
                font-size: 12px;
                color: #fff;
                position: absolute;
                left: 100%;
                width: 62px;
                line-height: 32px;
                height: 35px;
                padding: 0 10px;
                background-color: #c81623;
                z-index: -1;
            }
        }
        .user{
            background: url(../details-img/固定-user.png) no-repeat -88px -175px;
            background-color: #7a6e6e;
        }
        .shop{
            background: url(../details-img/固定-user.png) -50px 0;
            background-color: #7a6e6e;
        }
        .ticket{
            background: url(../details-img/固定-user.png) -190px -100px;
            background-color: #7a6e6e;
        }
        .code{
            background: url(../details-img/固定-code.gif) no-repeat center;
            background-color: #7a6e6e;
        }
            .top{
                background: url(../details-img/固定-user.png) -50px -250px;
                background-color: #7a6e6e;
                p{
                    // animation: move 3s linear;
                    font-size: 12px;
                    color: #fff;
                    position: absolute;
                    left: 100%;
                    width: 62px;
                    line-height: 32px;
                    height: 35px;
                    padding: 0 10px;
                    background-color: #c81623;
                    z-index: -1;
                }
            }
           
    }
}


//顶部导航栏
.nav{
    min-width: 1210px;
    font-size: 12px;
    background-color: #e3e4e5;
    .content{
        background-color: #e3e4e5;
        display: flex;
        height: 30px;
        width: 1210px;
        margin:auto;
        .location{
            flex: auto;
            justify-content: flex-start;
            display: flex;
            span{
                margin: 10px 0;
                padding: auto 10px;
                color: #999;
            }
        }
        div+div{
            margin: 10px 0;
            padding: 0 10px;
            border-right: #ccc solid 1px;
            color: #999;
        }
        div:last-child{
            border-right: none;
        }
        .enroll{
            span{
                color: red;
                margin-left: 10px;
            }
        }
    }
}
//京东搜索框
.search{
    width: 1210px;
    margin: 0 auto;
    height: 100px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    .log{
        width: 270px;
        height: 60px;
        background-image: url(../img/logo京东.png);
        background-position: 0px 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        .classfity{
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
        }
    }
    .search-container{
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .form{
            display: flex;
            flex-basis: 560px;
            height: 36px;
            float: left;
            >div+div{
                color: #fff;
                width: 52px;
                line-height: 36px;
                text-align: center;
                padding: 0 8px;
            }
            .cemra{
                background-color: #b61d1d;
            }
            .zoom{
                background-color: #474e5c;
            }
            .form-in{
                border: 3px #b61d1d solid;
                margin-left: 60px;
                flex-grow: 1;
                input{
                    width: 98%;
                    height: 90%;
                    outline: none;
                    border: none;
                }
            }
        }
        .descript{
            width: 100%;
            text-align: left;
            margin-left: 60px;
            font-size: 12px;
            span{
                margin-right: 10px;
            }
        }
        .basket{
            width: 141px;
            height: 36px;
            float: right;
            margin-right: 30px;
            text-align: center;
            line-height: 36px;
            border: 1px solid;
            padding: 0 28px;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                display: block;
                border: 10px solid transparent;
                border-left: 10px solid #666;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }
}
//banner图片
.banner{
    min-width: 1210px;
    overflow: hidden;
    font-size: 0px;
    img{
       height: 110px;
    }
}
.banner2{
    font-size: 0px;
    min-width: 1210px;
    overflow: hidden;
    img{
       height: 40px;
    }
}
//商品分类纲领
.goods-outline{
    background-color: #eee;
    height: 44px;
    font-size: 12px;
    min-width: 1210px;
    .goods-outline-wrap{
        width: 1210px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .outline-left{
            display: flex;
            padding: 13px 0 9px;
            align-items: center;
            span:nth-child(2n){
                box-sizing: content-box;
                width: 6px;
                height: 18px;
                padding: 0 10px;
            }
            span:last-child{
                width: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .outline-right{
            display: flex;
            align-items: center;
            >div{
                margin-right: 10px;
            }
            .item{
                margin-right: 10px;
                .name{
                    font-size: 12px;
                }
            }
            //评价星级
            .pop-score{
                padding: 5px;
                width: 90px;
                // background-color: #999;
                .star{
                    margin: 0 auto;
                    width: 80px;
                    border-radius: 25px;
                    overflow: hidden;
                    display: flex;
                    .star-gray{
                        order: 2;
                        width: 16px;
                        height: 14px;
                        background-image: url(../details-img/star-gray.png);
                    }
                    .star-light{
                        width: 64px;
                        height: 14px;
                        background-image: url(../details-img/star-light.png);
                    }
                }
            }
            //联系客服
            .item-link{
                .customer-link{
                    display: flex;
                    align-items: center;
                    .sprite-im{
                        display: block;
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                        background-image: url(../details-img/__sprite.png);
                        background-repeat: no-repeat;
                        background-position: -34px -16px;
                    }
                }
            }
             //关注店铺
             .item-focus{
                .customer-focus{
                    display: flex;
                    align-items: center;
                    .sprite-follow{
                        display: block;
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                        background-image: url(../details-img/__sprite.png);
                        background-repeat: no-repeat;
                        background-position: -34px 0px;
                    }
                }
            }
        }
    }
}
//单品详情>左侧商品预览+中间价格+同类商品
.details{
    min-width: 1210px;
    background-color: #fff;
    //单品详情
    .product-intro{
        width: 1210px;
        margin: 10px auto;
        display: flex;
          //左侧预览
          //分3段
          .preview-wrap{
            width: 352px;
            padding-bottom: 15px;
            //主图
            .preview{
                position: relative;
                border: 1px solid #eee;
                margin-bottom: 20px;
                img{
                    width: 350px;
                    height: 350px;
                }
                .pre-picture{
                    text-align: center;
                    position: absolute;
                    width: 350px;
                    height: 51px;
                    bottom: 0;
                    background-image: url(../details-img/preview.bottom.png);
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                    background-size: cover
                    ;
                    p{
                        position: absolute;
                        bottom: 5px;
                        left: 15%;
                        color: #fff;

                    }

                }
            }
            //5张预览图
            .spec-list{
                margin-bottom: 18px;
                ul{
                    height: 54px;
                    display: flex;
                    align-items: center;
                    li{
                        margin: 0 2px;
                        width: 54px;
                        height: 54px;
                        text-align: center;
                        line-height: 54px;
                        img{
                            width: 50px;
                            width: 50px;
                        }
                    }
                    li:first-child{
                        width: 22px;
                        height: 32px;
                        background: url(../details-img/__sprite2.png);
                        background-position: 0px -54px;
                    }
                    li:last-child{
                        width: 22px;
                        height: 32px;
                        background: url(../details-img/__sprite2.png);
                        background-position: -78px 0px;
                    }
                }
            }
            //关注对比区
            .preview-info{
                color: #999;
                width: 352px;
                height: 20px;
                .left-btns{
                    float: left;
                    display: flex;
                    align-items: center;
                    >div{
                        margin-right: 5px;
                    }
                    .sprite-follow{
                        width: 15px;
                        height: 16px;
                        background: url(../details-img/__sprite2.png) -44px -40px;
                    }
                    .sprite-compare{
                        width: 15px;
                        height: 16px;
                        background: url(../details-img/__sprite2.png) -30px -24px;
                    }
                }
                .right-btns{
                    float: right;
                }
            }
          }
          //中间价格
          .iteminfo-wrap{
            width: 590px;
            margin: 0 24px 0 30px;
            // 分4行
            // 第一行商品名
            .sku-name{
                height: 56px;
                padding-top: 10px;
                margin-bottom: 5px;
                font-weight: 700;
                font-size: 16px;
                line-height: 28px;
            }
            //第二行商品价格
            .news{
                height: 18px;
                margin-bottom: 5px;
                color: #e4393c;
                font-size: 12px;
            }
            //第三行商品摘要
            .summary-first{
                padding-bottom: 5px;
                height: 139px;
                .summary-price-wrap{
                    background-color: #f3f3f3;
                    padding-top: 10px;
                    padding-left: 10px;
                    //分三段
                    .price-first{
                        display: flex;
                        font-size: 16px;
                        align-items: center;
                        position: relative;
                        span{
                            margin-right: 10px;
                        }
                        span.blue{
                            color: #005aa0;
                            font-size: 16px;
                            font-weight: 200;
                            font-size: 12px;
                        }
                        span.gray{
                            color: #999;
                            font-weight: 100;
                            font-size: 12px;
                            letter-spacing: 2px;
                        }
                        span.red{
                            color: #e4393c;
                            font-size: 22px;
                        }
                        >div{
                            padding: 5px;
                            right: 0;
                            position: absolute;
                            display: flex;
                            float: right;
                            flex-direction: 
                            column;
                            align-items: center;
                            .blue{
                                color: #005aa0;
                            }
                        }
                    }
                    .price-second{
                        height: 34px;
                        margin-bottom: 3px;
                        padding-bottom: 2px;
                        display: flex;
                        align-items: center;
                        .text{
                            font-size: 12px;
                            font-weight: 100;
                            letter-spacing: 2px;
                            color: #999;
                            margin-right: 10px;
                        }
                        .quan{
                            position: relative;
                            background-color: #ffdedf;
                            border-top: 1px solid #df3033;
                            border-bottom: 1px solid #df3033;
                            width: 57px;
                            margin-left: 10px;
                            padding-left: 2px;
                            font-size: 12px;
                            text-align: center;
                            color: #df3033;
                            overflow: hidden;
                            s{
                                position: absolute;
                                width: 2px;
                                left: 1px;
                                height: 18px;
                                background: url(../details-img/quan-arr.gif) no-repeat;
                                overflow: hidden;
                            }
                            b{
                                position: absolute;
                                width: 2px;
                                right: 1px;
                                height: 18px;
                                background: url(../details-img/quan-arr.gif) no-repeat;
                                overflow: hidden;
                            }
                        }
                    }
                    .price-third{
                        // height: 60px;
                        margin-bottom: 5px;
                        display: flex;
                        flex-wrap: wrap;
                        .gift{
                            font-size: 12px;
                            font-weight: 100;
                            color: #999;
                            letter-spacing: 12px;
                            width: 48px;
                            height: 30px;
                            line-height: 30px;
                        }
                        .gift-m{
                            margin-left: 10px;
                            // height: 60px;
                            display: flex;
                            align-items: center;
                            font-weight: 100;
                            font-size: 12px;
                            span{
                                margin-right: 10px;
                            }
                            p{
                                color: #999;
                                font-size: 12px;
                            }
                            color: #df3033;
                            .m-text{
                                color: #df3033;
                                border: 1px 
                                solid #df3033;
                                margin: 5px 0;
                                padding: 2px 3px;
                                margin-right: 5px;
                                font-size: 12px;
                                font-weight: 100;
                            }
                            img{
                                width: 25px;
                                height: 25px;
                            }
                        }
                        .gift-b{
                            width: 100%;
                            margin-top: 10px;
                            text-align: right;
                            display: flex;
                            justify-content: flex-end;
                            .sprite-arr-close{
                                margin: 0 5px;
                                display: inline-block;
                                background: url(../details-img/__sprite-3.png);
                                background-position: -27px -20px;
                                width: 13px;
                                height: 7px;
                                z-index: 5;
                            }
                        }
                    }
                }
            }
            //第4行选择服务
            .p-choose-wrap{
                background-color: #fff;
                .choose-t{
                    display: flex;
                    flex-direction: column;
                    //公共样式
                    >div{
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        .c-text{
                            flex: none;
                            align-self: flex-start;
                            white-space: nowrap;
                            padding-left: 10px;
                            width: 48px;
                            height: 32px;
                            line-height: 32px;
                            text-align:justify;
                            text-align-last: justify;
                            font-size: 12px;
                            font-weight: 100;
                            color: #999;
                        }
                        .border{
                            margin-left: 20px;
                            display: flex;
                            align-items: center;
                        }
                    }
                    //增值
                    .zengzhi{
                        .border{
                            margin-left: 20px;
                            // height: 32px;
                            padding: 2px;
                            border: 1px solid #666;
                            border-radius: 25px;
                            i{
                                display: inline-block;
                                width: 16px;
                                height: 16px;
                                background: url(../details-img/增值.png) 0 -32px;
                            }
                            span{
                                color: #5e69ad;
                                font-size: 12px;
                                font-weight: 100;
                            }
                        }
                    }
                    //配送
                    .peisong{
                        border-bottom: 1px solid #aaa;
                        .border{
                            display: flex;
                            flex-direction: column;
                            flex-wrap: wrap;
                            align-items: flex-start;
                            font-size: 12px;
                            .area{
                                margin-bottom: 2px;
                                //有货
                                span{
                                    font-weight: 700;
                                    color: #999;
                                }
                            }
                            ul{
                                margin-bottom: 10px;
                                display: flex;
                                color: #aaa;
                                li{
                                    margin-right: 5px;
                                    padding-left: 5px;
                                }
                                .blue{
                                    color: #646fb0;
                                }
                                .wenhao{
                                    width: 11px;
                                    height: 16px;
                                    background: url(../details-img/__sprite4.png);
                                }
                            }
                            .jd-wuliu{
                                margin-bottom: 10px;
                                color: #646fb0;
                                display: flex;
                                .icon-wl{
                                    width: 86px;
                                    height: 16px;
                                    background: url(../details-img/京东物流.png) no-repeat;
                                    background-size: cover;
                                }
                                .server{
                                    color: #aaa;
                                    span{
                                        font-size: 12px;
                                        font-weight: 100;
                                        padding: 5px;
                                        color: #646fb0;
                                    }
                                }
                            }
                            p{
                                line-height: 24px;
                                font-size: 12px;
                                font-weight: 100;
                                color: #999;
                                .red{
                                    color: #e4393c;
                                }
                                b{
                                    font-weight: 700;
                                }
                            }
                        }
                    }
                    //京选服务
                    .jingxuan{
                        .border{
                            display: flex;
                            border: 1px solid #ccc;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                            span{
                                font-size: 12px;
                                padding: 4px;
                            }
                            .arrow-icon{
                                width: 25px;
                                height: 10px;
                                background: url(../details-img/service-icon.png);
                            }
                        }
                        .wenhao{
                            margin-left: 10px;
                            width: 16px;
                            height: 16px;
                            background: url(../details-img/__sprite4.png);
                        }
                    }
                    //增值保障
                    .baozhang{
                        >.border{
                            flex-wrap: wrap;
                            .border{
                                display: flex;
                                margin: 5px;
                                border: 1px solid #ccc;
                                img{
                                    width: 16px;
                                    height: 16px;
                                }
                                span{
                                    font-size: 12px;
                                    padding: 4px;
                                }
                                .arrow-icon{
                                    width: 25px;
                                    height: 10px;
                                    background: url(../details-img/service-icon.png);
                                }
                            }
                            .wenhao{
                                margin-left: 10px;
                                width: 16px;
                                height: 16px;
                                background: url(../details-img/__sprite4.png);
                            }
                        }
                       
                    }
                    //京东服务
                    .jd-fuwu{
                        .border{
                            display: flex;
                            border: 1px solid #ccc;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                            span{
                                font-size: 12px;
                                padding: 4px;
                            }
                            .arrow-icon{
                                width: 25px;
                                height: 10px;
                                background: url(../details-img/service-icon.png);
                            }
                        }
                        .wenhao{
                            margin-left: 10px;
                            width: 16px;
                            height: 16px;
                            background: url(../details-img/__sprite4.png);
                        }
                    }
                    //白条分期
                    .fenqi{
                        .border{
                            display: flex;
                            flex-wrap: wrap;
                            .item{
                                border: 1px solid #ccc;
                                padding: 0 13px;
                                height: 34px;
                                line-height: 34px;
                                font-size: 12px;
                                color: #666;
                                margin: 10px;

                            }
                        }
                        .wenhao{
                            width: 16px;
                            height: 16px;
                            background: url(../details-img/__sprite4.png);
                        }
                    }
                }
            }
            //加入购物车
            .basket{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .count{
                    // width: 58px;
                    // height: 44px;
                    border: 1px solid #666;
                    margin-right: 10px;
                    display: grid;
                    grid-template-areas: 
                                    "a b"
                                    "a c";
                    .left{
                        grid-area: a;
                        width: 47px;
                        // height: 44px;
                        line-height: 50px;
                        text-align: center;
                    }
                    .r-t{
                        grid-area: b;
                        width: 17px;
                        height: 24px;
                        button{
                            width: 100%;
                            height: 100%;
                            outline: none;
                            border: none;
                        }
                    }
                    .r-b{
                        grid-area: c;
                        width: 17px;
                        height: 24px;
                        button{
                            width: 100%;
                            height: 100%;
                            outline: none;
                            border: none;
                        }
                    }
                }
                .join{
                    width: 142px;
                    height: 46px;
                    font-size: 18px;
                    line-height: 46px;
                    text-align: center;
                    font-weight: 700;
                    padding: 0 26px;
                    background-color: #df3033;
                    color: #fff;
                }
                .tips{
                    margin-top: 20px;
                    width: 100%;
                    font-size: 12px;
                    color: #999;
                    font-weight: 100;
                }
            }
          }
          //右侧同类商品
          .track{
            width: 210px;
            display: flex;
            flex-direction: column;
            align-items: center;
            //看一看
            .see{
                display: flex;
                justify-content: center;
                position: relative;
                h3{
                    display: inline-block;
                    padding: 0 20px;
                    position: relative;
                    height: 50px;
                    line-height: 50px;
                    z-index: 2;
                    background: #fff;
                }
                span{
                    position: absolute;
                    width: 210px;
                    height: 1px;
                    background: #f2f2f2;
                    z-index: 1;
                    top: 25px;
                }
            }
            //产品跟踪
            [class*=product]{
                display: flex;
                flex-direction: column;
                img{
                    width: 150px;
                    height: 150px;
                }
                .word{
                    width: 150px;
                    height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .red{
                    width: 150px;
                    height: 18px;
                    color: #c81623;
                    font-size: 12px;
                    text-align: center;
                }
            }
            .track-more{
                display: flex;
                width: 150px;
                justify-content: space-evenly;
                .sprite-up{
                    width: 28px;
                    height: 15px;
                    background: url(../details-img/track-more.png) -28px 0;
                }
                .sprite-down{
                    width: 28px;
                    height: 15px;
                    background: url(../details-img/track-more.png);
                }
            }
          }
    }
  
}
//店长推荐
.w{
    min-width: 1210px;
    .prefer{
        width: 1210px;
        margin: auto;
        background-color: #f7f7f7;
        border-bottom: 1px solid #e4393c;
        .title{
            width: 106px;
            height: 38px;
            color: #fff;
            font-size: 14px;
            background-color: #e4393c;
            text-align: center;
            line-height: 38px;
        }
    }
    .plist{
        margin: auto;
        width: 1210px;
        background-color: #fff;
        height: 210px;
        display: flex;
        [class*=plist-]{
            width: 160px;
            margin: 10px 20px;
            img{
                width: 160px;
                height: 160px;
            }
            >p{
                width: 160px;
                text-align: center;
                font-size: 14px;
                color: #e4393c;

            }
        }
    }
}

//container主体，带粘性定位
.container{
    width: 1210px;
    margin: auto;
    &::after{
        content: "";
        display: block;
        clear: both;
    }
    //左侧店铺信息加店内分类，使用粘性定位
    .aside{
        width: 210px;
        height: 5820px;
        float: left;
        //margin-left:15px
        .shop-sticky{
            border: 1px #eee solid;
            position: sticky;
            top: 1px;
            display: flex;
            height: 40px;
            align-items: center;
            background-color: #f7f7f7;
            h3{
                padding-left: 10px;
                width: 98px;
                height: 18px;
                font-size: 14px;
                line-height: 18px;
            }
            .customer-service{
                width: 16px;
                height: 16px;
                background: url(../details-img/__sprite.png);
                background-repeat: no-repeat;
                background-position: -34px -16px;
                margin-left: 15px;
                line-height: 18px;
            }
        }
        // 店铺星级
        .pop-score{
            margin-bottom: 15px;
            padding-left: 15px;
            font-size: 12px;
            color: #999;
            display: flex;
            flex-direction: column;
            padding-bottom: 10px;
            border: 1px solid #eee;
            >div{
                font-size: 12px;
                line-height: 18px;
                span{
                    margin-left: 15px;
                }
                .red{
                    color: #e2231a;
                }
                .green{
                    color: #3b4;
                }
            }
            .first{
                border-bottom: 1px solid #eee;
                width: 188px;
                height:24px;
                color: #666;
                margin-bottom: 8px;
                font-size: 12px;
                display: flex;
                align-items: center;
                //评价星级
             .score{
                padding: 5px;
                width: 90px;
                // background-color: #999;
                .star{
                    margin: 0 auto;
                    width: 80px;
                    border-radius: 25px;
                    overflow: hidden;
                    display: flex;
                    .star-gray{
                        order: 2;
                        width: 16px;
                        height: 14px;
                        background-image: url(../details-img/star-gray.png);
                    }
                    .star-light{
                        width: 64px;
                        height: 14px;
                        background-image: url(../details-img/star-light.png);
                    }
                }
            }
            }
             .btns{
                 margin-top: 20px;
                 display: flex;
                 .left{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 8px;
                    i{
                        margin-right: 8px;
                        width: 16px;
                        height: 16px;
                        background: url(../details-img/店铺关注.png) -34px 0;
                    }
                 }
                 .right{
                    justify-content: center;
                    align-items: center;
                    display: flex;
                    width: 90px;
                    line-height: 30px;
                    height: 30px;
                    i{
                        margin-right: 8px;
                        width: 16px;
                        height: 16px;
                        background: url(../details-img/店铺关注.png) -34px -16px;
                    }
                 }
             }
        }
        // 店内搜索
        .sp-search{
            margin-bottom: 15px;
            width: 210px;
            font-size: 12px;
            color: #666;
            border: 1px solid #eee;
            .word{
                font-size: 14px;
                font-weight: 700;
                line-height: 40px;
                border: 1px solid #eee;
                background-color: #f7f7f7;
            }
            .keyword{
                padding: 2px;
                margin-top: 10px;
            }
            .price{
                margin-top: 5px;
                input{
                    margin-left: -3px;
                    width: 48px;
                    padding: 2px;
                }
                span{
                    text-align: justify;
                    text-align-last: justify;
                    margin: 0 5px;
                }
            }
            .btns{
                margin-top: 5px;
                margin-left: 53px;
                button{
                    padding: 5px;
                }
            }
        }
        //店铺分类
        .sp-category{
            background-color: #f4f4f4;
            font-size: 12px;
            color: #666;
            width: 210px;
            border: 1px solid #eee;
            margin-bottom: 15px;
            .title{
                font-size: 14px;
                font-weight: 700;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ddd;
            }
            ul{
                padding-left: 10px;
                li{
                    display: flex;
                    align-items: center;
                    .li-p{
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        background: url(../details-img/店铺分类.png) no-repeat -20px 0;
                        margin-right: 5px;
                    }
                    height: 30px;
                    line-height: 30px;
                    border-bottom: 1px solid #ddd;

                }
            }
        }
        //店铺热销
        .pop-hot{
            border: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
            .title{
                width: 210px;
                background-color: #f4f4f4;
                height: 40px;
                border-bottom: 1px solid #e4393c;
                .red{
                    width: 100px;
                    height: 40px;
                    background-color:
                     #e4393c;
                    text-align: center;
                     color: #fff;
                    font-size: 14px;
                    line-height: 40px;
                }
            }
            >div{
                padding: 5px 0;
                margin-bottom: 10px;
                img{
                    width: 160px;
                    height: 160px;
                }
                .info{
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    font-weight: 100;
                    color: #666;
                    .count{
                        span{
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            color: #fff;
                            background-color: #e4393c;
                            text-align: center;
                            line-height: 20px;
                            margin-right: 5px;
                        }
                    }
                    .price{
                        color: #e4393c;
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
            }
        }
        //店铺新品
        .new-product{
            border: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 15px;
            .title{
                width: 210px;
                background-color: #f4f4f4;
                height: 40px;
                .red{
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 700;
                    color: #666;
                    line-height: 40px;
                }
            }
            >div{
                padding: 5px 0;
                margin-bottom: 10px;
                img{
                    width: 160px;
                    height: 160px;
                }
                .info{
                    display: flex;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 100;
                    color: #666;
                    .count{
                        span{
                            display: inline-block;
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            color: #fff;
                            background-color: #e4393c;
                            text-align: center;
                            line-height: 20px;
                            margin-right: 5px;
                        }
                    }
                    .price{
                        color: #e4393c;
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
            }
        }
    }
    // 右侧商品介绍使用粘性定位
    .detailed{
        width: 990px;
        float: right;
        .product-sticky{
            position: sticky;
            top: 1px;
            background-color: #f7f7f7;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e4393c;
            font-size: 14px;
            >div{
                text-align: center;
                color: #666;
            }
            .intr-red{
                width: 160px;
                padding: 10px 25px;
                color: #fff;
                background-color: #e4393c;
            }
            .join-red{
                width: 70px;
                height: 30px;
                line-height: 30px;
                padding: 0 16px;
                color: #fff;
                background-color: #e4393c;
            }
        }
        //商品规格
        .item{
            font-size: 12px;
            font-weight: 100;
            padding: 40px 40px;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #eee;
            .name{
                width: 100%;
                margin-bottom: 15px;
            }
            ul{
                position: relative;
                margin-bottom: 15px;
                width: 100%;
                font-size: 0px;
                li{
                    font-size: 12px;
                    display: inline-block;
                    // border: solid;
                    width: 200px;
                    line-height: 24px;
                }
                .over{
                    line-height: 24px;
                    overflow:hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                &:last-child{
                    display: flex;
                    align-items: center;
                }
            }
            .more{
                margin-top: 20px;
                width: 100%;
                text-align: right;
                color: #005aa0;
            }
        }
        //大图
        .picture{
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                display: block;
            }
        }
        //售后保障
        .after-sale{
            width: 990px;
            margin-top: 50px;
            .title{
                height: 40px;
                background-color: #f4f4f4;
                border: 1px solid #eee;
                span{
                    margin-left: 20px;
                    font-size: 14px;
                    line-height: 40px;
                    font-weight: 700;
                }
            }
            .service{
                margin-top: 50px;
                p:first-child{
                    line-height: 32px;
                    color: #e4393c;
                    font-size: 16px;
                    font-weight: 700;
                    i{
                        display: inline-block;
                        width: 32px;
                        margin-bottom: -10px;
                        height:32px;
                        background: url(../details-img/售后.png) -32px -75px;
                        margin-right: 10px;
                    }
                    strong{
                        display: inline-block;
                        line-height: 32px;
                        padding: 10px 0;
                    }
                }
                p:last-child{
                    padding: 12px 32px;
                    font-size: 12px;
                    font-weight: 100;
                    color: #666;
                }
            }
            .promise{
                margin-top: 10px;
                p:first-child{
                    line-height: 32px;
                    color: #e4393c;
                    font-size: 16px;
                    font-weight: 700;
                    i{
                        display: inline-block;
                        width: 32px;
                        margin-bottom: -10px;
                        height:32px;
                        background: url(../details-img/售后.png) -32px -75px;
                        margin-right: 10px;
                    }
                    strong{
                        display: inline-block;
                        line-height: 32px;
                        padding: 10px 0;
                    }
                }
                p:last-child{
                    padding: 12px 32px;
                    font-size: 12px;
                    font-weight: 100;
                    color: #666;
                }
            }
            .real{
                margin-top: 10px;
                p:first-child{
                    line-height: 32px;
                    color: #e4393c;
                    font-size: 16px;
                    font-weight: 700;
                    i{
                        display: inline-block;
                        width: 32px;
                        margin-bottom: -10px;
                        height:32px;
                        background: url(../details-img/售后.png) -32px -75px;
                        margin-right: 10px;
                    }
                    strong{
                        display: inline-block;
                        line-height: 32px;
                        padding: 10px 0;
                    }
                }
                p:last-child{
                    padding: 12px 32px;
                    font-size: 12px;
                    font-weight: 100;
                    color: #666;
                }
            }
            .state{
                font-size: 12px;
                color: #666;
                strong{
                    display: inline-block;
                    color: #e4393c;
                    padding: 8px 0 3px 0;
                }
                p{
                    font-size: 12px;
                    line-height: 24px;
                    color: #666;
                    b{

                    }
                }
            }
        }
        //商品评价
        .evaluate{
            width: 990px;
            margin-top: 20px;
            .title{
                height: 40px;
                background-color: #f4f4f4;
                border: 1px solid #eee;
                span{
                    margin-left: 20px;
                    font-size: 14px;
                    line-height: 40px;
                    font-weight: 700;
                }
            }
            //评价主体
            .comment{
                margin-top: 20px;
                display: flex;
                padding: 20px;
                .comment-percent{
                    p{
                        color: #666;
                        font-size: 12px;
                    }
                    strong{
                        font-size: 45px;
                        color: #e4393c;
                        font-weight: 400;
                    }
                }
                .notag{
                    flex-grow: 1;
                    position: relative;
                    padding-left: 98px;
                    .notag-p{
                        display: inline-block;
                        width: 320px;
                        height: 80px;
                        background: url(../details-img/没有评价.png) no-repeat;
                    }
                    span{
                        position: absolute;
                        display: inline-block;
                        color: #999;
                        left: 220px;
                        height: 80px;
                        line-height: 80px;
                    }
                }
            }
        }
        //评价分类
        .ev-classfity{
            background-color: #fafafa;
            width: 990px;
            height: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #666;
            ul{
                li{
                    margin-left: 5px;
                    display: inline-block;
                    input{
                        width: 12px;
                        height: 12px;
                        margin: 3px;
                    }
                }
            }
            div{
                margin-right: 10px;
                position: relative;
                padding-right: 16px;
                i{
                    top: -8px;
                    right: 0;
                    position: absolute;
                    display: inline-block;
                    width: 16px;
                    height: 30px;
                    background: url(../details-img/评论区箭头.png) 1px -19px no-repeat;
                }
            }
        }
        //评价内容
        .content{
            padding-top: 20px;
            text-align: center;
            font-size: 12px;
            color: #666;
            width: 100%;
            height: 50px;
        }
        //商品问答
        .answer{
            width: 990px;
            margin-top: 20px;
            background-color: #f4f4f4;
            .title{
                height: 40px;
                border-bottom: 1px solid #eee;
                span{
                    margin-left: 20px;
                    font-size: 14px;
                    line-height: 40px;
                    font-weight: 700;
                }
            }
            .tiwen{
                height: 74px;
                display: flex;
                justify-content: center;
                align-items: center;
                i{
                    width: 123px;
                    height: 67px;
                    margin: 8px 15px 0 0;
                    background: url(../details-img/提问.png);
                }
                span{
                    font-size: 14px;
                    color: #333;
                    font-size: 14px;
                }
                b{
                    font-weight: 400;
                    height: 26px;
                    border-radius: 13px;
                    border: 1px solid #e4393c;
                    color: #e4393c;
                    line-height: 26px;
                    padding: 0 18px;
                    margin-left: 12px;
                }
            }
        }
        //本店好评商品
        .nice-goods{
            width: 990px;
            margin-top: 20px;
            .title{
                height: 40px;
                background-color: #f4f4f4;
                border: 1px solid #eee;
                span{
                    margin-left: 20px;
                    font-size: 14px;
                    line-height: 40px;
                    font-weight: 700;
                }
            }
        }
        //好评商品展示
        .show-nice{
            ul{
                padding-top: 10px;
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                li{
                    border: 1px solid #eee;
                    display: flex;
                    flex-direction: column;
                    width: 220px;
                    height: 325px;
                    margin-bottom: 10px;
                    img{
                        width: 220px;
                        height: 220px;
                    }
                    .show-name{
                        font-size: 12px;
                        color: #666;
                        width: 200px;
                        line-height: 16px;
                        padding: 0 9px;
                        margin-bottom: 5px;
                    }
                    .show-price{
                        display: flex;
                        justify-content: space-between;
                        position: relative;
                        span{
                            color: #e4393c;
                            font-size: 14px;
                        }
                        s{
                            position: absolute;
                            right: 25px;
                            bottom: 2px;
                            text-align: right;
                            width: 14px;
                            height: 13px;
                            margin: 2px 5px 0 0;
                            background: url(../details-img/商品关注.png) no-repeat;
                        }
                        b{
                            font-size: 12px;
                            font-weight: 400;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
}


//售后区
.after{
    border-bottom: solid 2px #ccc; 
    >div{
        width: 1190px;
        height: 103px;
        margin: auto;
        display: flex;
        align-items: center;
        >div{
            margin: auto;
            width: 297px;
            height: 42px;
            padding-left: 90px;
            font-size: 18px;
            font-weight: 900;
            line-height: 42px;
            position: relative;
            &::before{
                content: "";
                width: 36px;
                height: 42px;
                display: inline-block;
                // border: solid 1px;
                left: 45px;
                position: absolute;
            }
        }
        .duo{
            &::before{
                background: url(../img/精灵图/精灵图文字.png);
                opacity: .5;
            }
        }
        .kuai{
            &::before{
                background: url(../img/精灵图/精灵图文字.png) 74px 0;
                opacity: .5;
            }
        }
        .hao{
            &::before{
                background: url(../img/精灵图/精灵图文字.png) 149px 0;
                opacity: .5;
            }
        }
        .sheng{
            &::before{
                background: url(../img/精灵图/精灵图文字.png)  0 42px;
                opacity: .5;
            }
        }
    }
}
//页尾
.last{
    width: 1190px;
    height: 200px;
    margin: 20px auto;
    display: flex;
    border-bottom: 2px solid #ccc;
    >ul{
        width: 198px;
        // border: solid 1px;
        li:first-child{
            font-size: 14px;
            font-weight: 700;
        }
        li+li{
            font-size: 12px;
        }
        li{
            margin: 10px 20px;
        }
        p{
            margin: 0 20px;
        }
    }
}
//友情链接，版权号区
.link{
    width: 1190px;
    margin: auto;
    >div{
        ul{
            text-align: center;
            font-size: 0px;
            li{
                padding: 0 10px;
                font-size: 12px;
                color: #888;
                display: inline-block;
                border-right: solid 1px #888;
                &:last-child{
                    border-right: none;
                }
            }
        }
    }
    .link-row5{
        ul{
            .shijie{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 39% 60%;
                }
            }
            .deguo{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 57% 58%;
                }
            }
            .yuenan{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 76% 58%;
                }
            }
            .chaoxian{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 93% 58%;
                }
            }
            .meiguo{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 39% 77%;
                }
            }
        }
    }
    .link-last{
        display: flex;
        justify-content: center;
        div{
            width: 103px;
            height: 32px;
            margin: 40px 2px;
        }
        .kexin{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 0;
        }
        .jingcha{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 25%;
        }
        .chenxin{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 25%;
        }
        .youhai{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 50%;
        }
        .jubao{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 50%;
        }
        .saohuan{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 73%;
        }
        .zhangai{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 73%;
        }
        .chanquan{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 99%;
        }
    }
}
